<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: black;
        display: flex;
        gap:70px;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        align-items: center;
    }
    .btn{
        color:#ccc;
        background-color:rgba(133, 133, 133, 0.147);
        width: 180px;
        height: 60px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 1s;
        position: relative;
        overflow: hidden;
    }
    .btn::before{
        content: "";
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: 150px;
        height: 150px;
        transform: translate(-60%,-60%);
        /* 线径渐变 模糊圆 */
        background: radial-gradient(var(--a),transparent,transparent);
        opacity: 0;
        transition: all 1s,left 0s,top 0s;
    }
    .btn span{
        position: relative;
        z-index: 999;
    }
    /* 关键是就是after这个伪类 层级和inset边距还有透明度 */
    .btn::after{
        content: "";
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 99;
        inset: 2px;
        border-radius: 50px;
    }
    .btn:hover::before{
        opacity: 1;
    }
    .btn:hover{
        cursor: pointer;
        color:var(--a);
        text-shadow: 2px 3px 10px var(--a);
    }
</style>
<body>
    <div class="btn" style="--a:#23D96E"><span>HELLOW</span></div>
    <div class="btn" style="--a:#E43F31"><span>WORD</span></div>
    <div class="btn" style="--a:#001ABC"><span>NIHAO</span></div>
</body>
</html>

<script>
    var btn = document.querySelectorAll(".btn")
    btn.forEach((item,index)=>{
        item.addEventListener("mousemove",function(e){
            console.log(e.offsetX,e.offsetY)
            let x = e.pageX - item.offsetLeft
            let y = e.pageY - item.offsetTop
            //js不能改变伪类的属性 所以只能通过css变量来改变伪元素的值
            //setProperty添加变量
            item.style.setProperty("--x",x+"px")
            item.style.setProperty("--y",y+"px")
        })
    })
</script>